<template>
  <div class="op-group comp-op-reset">
    <div class="op-title">重新赋值</div>
    <div
      v-for="(value, index) in recommendValues"
      :key="index"
      class="option-item"
    >
      <div class="title-row no-sub">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, mapDataBarSelectReset, value)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          重新赋值为 {{ value }}
        </span>
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="doOption($event, value)"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class BarReset extends Vue {
  @Prop() recommendValues!: Array<string>

  mapDataBarSelectReset: string = OptionPreViewAction.mapDataBarSelectReset

  /** 替换值 */
  replaceValue: string = ''

  /** 预览鼠标移入 */
  onMouseEnter(event: any, action: string, value: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
      DataStore.setMapDataReplaveValue(value)
    }
  }

  /** 预览鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  /** 执行操作 */
  doOption($event: MouseEvent, value: any) {
    this.$emit('actiondone', {
      action: this.mapDataBarSelectReset,
      replaceValue: value,
      desc: '列操作，筛选面板 > contains > 为所选单元格重新赋值',
    })
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
